import Taro, { Component } from '@tarojs/taro'
import { AtButton } from 'taro-ui'
import { View, Image, Text } from '@tarojs/components'
import { DNavBar, DLookImages } from '@/components'
import './dinventoryed.scss'
import http from '@/api'

const map = require('../assets/positioning.png')
const itembg = require('../assets/pic@2x.png')
const sIcon = require('../../assets/images/_-s-icon@2x.png')

export default class dinventoryed extends Component {
  constructor(props) {
    super(props)
    this.state = {
      active: 0,
      detail: '',
      outPic: [],
      inPic: [],
      carInfo: [],
      otherImg: [],
      companycar: {
        itemStatus: false,
        itemUrl: ''
      }
    }
  }
  componentWillMount() {
    this.getDeatil()
    // this.getImgs()
  }


  handleClick(value) {
    this.setState({
      active: value
    })
  }
  filterImg(files) {
    const { outPic, inPic, carInfo, otherImg } = this.state

    files.forEach((item, index) => {
      let obj = {}
      obj['imgTitle'] = item.imgTitle
      obj['imgAliyunUrl'] = item.imgAliyunUrl
      if (item.imgType === 1) {
        outPic[index] = item
      } else if (item.imgType === 2) {
        inPic[index] = item
      } else if (item.imgType === 3) {
        carInfo[index] = item
      } else if (item.imgType === 4) {
        otherImg[index] = item
      }
    })
    this.setState({
      outPic,
      inPic,
      carInfo,
      otherImg
    })
  }
  getDeatil() {
    let _obj = {
      id: this.$router.params.id,
      id2: this.$router.params.id2
    }
    http.getAppStocktaking(_obj).then(res => {
      // let detail = {
      //   ...res.info,
      //   stocktakingArea: res.detail[0].stocktakingArea
      // }
      this.filterImg(res.files)
      this.setState({
        detail: res.detail
      })
    })
  }

  onLookHandle(url, i = 0, arr = []) {
    if (window.bridge && arr.length > 0) {
      let _images = []
      arr.map(item => {
        _images.push(item.imgAliyunUrl)
      })
      window.bridge.callHandler('previewPhoto', { "index": i, "images": _images }, function responseCallback() { })
    } else if (window.bridge && arr.length === 0) {
      let _images = []
      _images.push(url)
      window.bridge.callHandler('previewPhoto', { "index": i, "images": _images }, function responseCallback() { })
    } else {
      this.setState({
        companycar: {
          ...this.state.companycar,
          itemStatus: true,
          itemUrl: url
        }
      })
    }
  }

  onLookItem() {
    this.setState({
      companycar: {
        ...this.state.companycar,
        itemStatus: false,
        itemUrl: ''
      }
    })
  }

  render() {
    const {
      active,
      list,
      detail,
      outPic,
      inPic,
      carInfo,
      otherImg,
      companycar
    } = this.state
    return (
      <View className='b_dinventoryed'>
        <DNavBar title={'已盘库'} className='b_dinventoryed_nav'></DNavBar>
        <View className='b_dinventoryed__box'>
          {/* <View className='b_dinventoryed__box_flex'>
            <View className='b_dinventoryed__box_left'>
              <View>地点</View>
              <View>盘库时间</View>
            </View>
            <View className='b_dinventoryed__box_right'>
              <View className='b_dinventoryed__box_right_flex'>
                <View>
                  {!detail.stocktakingArea ? '---' : detail.stocktakingArea}
                </View>
                <View>
                  <Image src={map} className='b_dinventoryed__box_right_img' ></Image>
                </View>
              </View>
              <View>{detail.startTime}</View>
            </View>
          </View> */}
          <View className='b_dinventoryed__images'>
            <View className='b_dinventoryed__time'>
              <Text className='time_label'>盘库时间</Text>
              <Text className='time_value'>{detail.stocktakingTime}</Text>
            </View>
            <Text className='b_dinventoryed__images_title'>盘库照片</Text>
            <View className="b_dinventoryed__images_enterpris">
              <View className='b_dinventoryed__images_enterpris_item'>
                <Text className='item_title'><Text className="at-icon-star_"></Text>车辆外观</Text>
                {
                  outPic.map((item, i) => {
                    return <View className='picBox'>
                      <Image src={item.imgAliyunUrl} className='item_image' onClick={this.onLookHandle.bind(this, item.imgAliyunUrl, i, outPic)}></Image>
                      <Text className='picText'>{item.imgTitle}</Text>
                    </View>
                  })
                }

              </View>
              <View className="b_dinventoryed__images_enterpris_item">
                <Text className="item_title"><Text className="at-icon-star_"></Text>车内照片</Text>
                {
                  inPic.map((item, i) => {
                    return <View className='picBox'>
                      <Image src={item.imgAliyunUrl} className='item_image' onClick={this.onLookHandle.bind(this, item.imgAliyunUrl, i, inPic)}></Image>
                      <Text className='picText'>{item.imgTitle}</Text>
                    </View>
                  })
                }
              </View>
              <View className="b_dinventoryed__images_enterpris_item">
                <Text className="item_title"><Text className="at-icon-star_"></Text>车辆信息</Text>
                {
                  carInfo.map((item, i) => {
                    return <View className='picBox'>
                      <Image src={item.imgAliyunUrl} className='item_image' onClick={this.onLookHandle.bind(this, item.imgAliyunUrl, i, carInfo)}></Image>
                      <Text className='picText'>{item.imgTitle}</Text>
                    </View>
                  })
                }
              </View>
              <View className="b_dinventoryed__images_enterpris_item">
                <Text className="item_title">异常照片</Text>
                {
                  otherImg.map((item, i) => {
                    return <View className='picBox'>
                      <Image src={item.imgAliyunUrl} className='item_image' onClick={this.onLookHandle.bind(this, item.imgAliyunUrl, i, otherImg)}></Image>
                      <Text className='picText'>{item.imgTitle}</Text>
                    </View>
                  })
                }
              </View>
            </View>

            <View className="b_dinventoryed__addresses">
              <Image src={sIcon}></Image>
              <Text>{!detail.stocktakingArea ? '---' : detail.stocktakingArea}</Text>
            </View>
          </View>

          <AtButton onClick={() => { Taro.navigateBack() }}>返回</AtButton>
        </View>
        <DLookImages status={companycar.itemStatus} url={companycar.itemUrl} onLookHandle={this.onLookItem.bind(this)}></DLookImages>
      </View>
    )
  }
}
